<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="static/styles/reset.css"/>
    <link rel="stylesheet" type="text/css" href="static/styles/common.css"/>
    <link rel="stylesheet" type="text/css" href="static/styles/team.css"/>
    <link rel="stylesheet" type="text/css" href="static/styles/message.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="static/scripts/vue.min.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="static/scripts/rem.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/scripts/axios.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/scripts/china_area.js" type="text/javascript" charset="utf-8"></script>
   
    <title>机构修改</title>
</head>
<body>
<div class="body body_gray" id="app">
    <div class="page_body">
        <form class="message_form" action="updateSGHOrgan.action">
            <div class="item md_cell">
                <div class="md_cell-wrapper">
                    <div class="md_cell-title">
                        <span>机构名称</span>
                    </div>
                    <div class="md_cell-value">
                        <input type="text" class="input" name="dwmc" placeholder="请输入"/>
                    </div>
                </div>
                <div class="md_cell-wrapper">
                    <div class="md_cell-title">
                        <span>负责人名称</span>
                    </div>
                    <div class="md_cell-value">
                        <input type="text" class="input"  name="rymc" placeholder="请输入"/>
                    </div>
                </div>
            </div>
            <div class="item md_cell">
                <div class="md_cell-wrapper">
                    <div class="md_cell-title">
                        <span>地址</span>
                    </div>
                    <div class="md_cell-value" style="    left: 140px;">
                        <a type="button" style="color: #000000;" data-am-modal="{target:'#doc-modal-1'}"
                           data-am-modal="{target:'#my-popup'}" @click="showModal">
                            修改地址
                        </a>
                    </div>
                </div>
                <div class="mt5 " style="padding-bottom: 5px;">
                    <textarea class="md_textarea" v-model="address" name="yxbs" placeholder="请输入地理位置"></textarea>
                </div>
                <div class="md_cell-wrapper">
                    <div class="md_cell-title">
                        <span>详细街道</span>
                    </div>
                    <div class="md_cell-value">

                    </div>
                </div>
                <div class="mt5 " style="padding-bottom: 5px;">
                    <textarea class="md_textarea" name="yxbs" value="${list.yxbs}"
                              placeholder="请输入地理位置"></textarea>
                </div>
            </div>
            <div class="item md_cell">
                <div class="md_cell-wrapper">
                    <div class="md_cell-title">
                        <span>机构简介</span>
                    </div>
                    <div class="md_cell-value">

                    </div>
                </div>
                <div class="mt5 " style="padding-bottom: 5px;">
                    <textarea class="md_textarea" name="cjdw" style="height: 120px;"
                              placeholder="请输入机构简介"></textarea>
                </div>
            </div>
            <div class="submitBtn">
                <button class="btn btn-block btn-blue">确认并保存</button>
            </div>
        </form>
        
        
        
        
        <!--弹框-->
        <div class="md_overlay" >
        	
        </div>
        <div class="md_modal" >
			<div class="md_modal_header">
				<span class="modal_title">修改地址</span>
				<span class="modal_close_icon" @click="closeModal">
					<img src="static/images/xixg_icon_shanchu.png"/>
				</span>
			</div>
			<div class="md_modal_body">
				<form class="md_form" onsubmit="return false">
					<div class="item md_cell">
						<div class="md_cell-wrapper">
							<div class="md_cell-title">
								<span><i class="must_star">*</i>所在省份</span>
							</div>
							<div class="md_cell-value">
								<select class="select" @change="changeProvince" v-model="province">
									<option value="">请选择</option>
									<option :value="item" v-for="(item,index) in provinceJson" :key="index">{{item.province}}</option>
								</select>
								<img class="arrow_right_icon" style="width: 10px;" src="static/images/home_button_rightarrow.png"/>
							</div>
						</div>
						<div class="md_cell-wrapper">
							<div class="md_cell-title">
								<span><i class="must_star">*</i>所在城市</span>
							</div>
							<div class="md_cell-value">
								<select class="select" @change="changeCity" v-model="city">
									<option value="">点击请选择</option>
									<option :value="item" v-for="(item,index) in cityJson" :key="index">{{item.city}}</option>
								</select>
								<img class="arrow_right_icon" style="width: 10px;" src="static/images/home_button_rightarrow.png"/>
							</div>
						</div>
						<div class="md_cell-wrapper">
							<div class="md_cell-title">
								<span><i class="must_star">*</i>所在区县</span>
							</div>
							<div class="md_cell-value">
								<select class="select" v-model="county">
									<option value="">请选择区县</option>
									<option :value="item" v-for="(item,index) in countyJson" :key="index">{{item.county}}</option>
								</select>
								<img class="arrow_right_icon" style="width: 10px;" src="static/images/home_button_rightarrow.png"/>
							</div>
						</div>
						<div class="md_cell-wrapper">
							<div class="md_cell-title">
								<span>镇/乡/街道</span>
							</div>
							<div class="md_cell-value">
								<select class="select" v-model="street">
									<option value="">请选择镇/乡/街道</option>
									<option value="0">街道1</option>
									<option value="1">街道二</option>
								</select>
								<img class="arrow_right_icon" style="width: 10px;" src="static/images/home_button_rightarrow.png"/>
							</div>
						</div>
						<div class="md_cell-wrapper">
							<div class="md_cell-title">
								<span>所在区点/村</span>
							</div>
							<div class="md_cell-value">
								<select class="select" v-model="village">
									<option value="">请选择所在区点/村</option>
									<option value="0">村一</option>
									<option value="1">村二</option>
								</select>
								<img class="arrow_right_icon" style="width: 10px;" src="static/images/home_button_rightarrow.png"/>
							</div>
						</div>
						
						<div class="signleBtnBlock">
							<button type="button" class="btn btn-block btn-info" @click="save">保存</button>
						</div>
					</div>
					
	
					
				</form>
			</div>
			
		</div>
        
        
        
        
    </div>
</div>
		<script type="text/javascript">
//			setTimeout(function(){
			
			//关闭弹框
			function closeModal(){
				$('.md_overlay').hide();
				$('.md_modal').hide();
			}
			
			//开启弹框
			function openModal(){
				$('.md_overlay').show();
				$('.md_modal').show();
			}
			
			
			new Vue({
				el:'#app',
				data:{
					modalVisible:false,
					provinceJson:'',
					cityJson:'',
					countyJson:'',
					streetJson:'',
					villageJson:'',
					province:'',	//省份
					city:'',	//城市
					county:'',	//区县
					street:'',	//街道
					village:'', //村
					address:''
				},
				created:function () {
					this.provinceJson = provinceJson;
					//初始化默认选中新疆维吾尔自治区;
//					var province = this.provinceJson.find(item=>{
//						return item.province == '新疆维吾尔自治区';
//					})
					var province = this.provinceJson.find(function(item){
						return item.province == '新疆维吾尔自治区';
					})
					this.province = province;
					this.changeProvince();
    			},
				methods:{
					//显示弹框
					showModal:function(){
						openModal()
					},
					//关闭弹框
					closeModal:function(){
						closeModal();
					},
					//选择省份
					changeProvince:function(){
						var parent = this.province.id;
//						this.cityJson = cityJson.filter(item=>{
//							return item.parent == parent 
//						})
						this.cityJson = cityJson.filter(function(item){
							return item.parent == parent 
						})
					},
					//选择城市
					changeCity:function(){
						var parent = this.city.id;
//						this.countyJson = countyJson.filter(item=>{
//							return item.parent == parent 
//						})
						this.countyJson = countyJson.filter(function(item){
							return item.parent == parent 
						})
					},
					//保存
					save:function(){
						this.address = '省份:'+this.province.province+',城市:'+
						this.city.city+',区县:'+this.county.county+',街道:'+this.street+',村:'+this.village;
						alert(this.address)
						
					}
				}
			})
//			},200)
		</script>
</body>
</html>